<template>
  <div class="panel-tab__content">
    <el-form label-width="60px" size="small" @submit.native.prevent>
      <el-form-item label="抄送人">
        <el-button round plain style="margin-right: 5px;margin-bottom: 5px" size="mini" type="primary" icon="el-icon-plus" @click="userVisible = true">添加抄送</el-button>
        <el-tag
          style="margin-right: 5px;"
          v-for="user in selectCopyUserList"
          :key="user.userId"
          size="small"
          closable
          @close="removeCopy(user)">
          {{user.nickName}}
        </el-tag>
      </el-form-item>
    </el-form>

    <!--选择人员-->
    <el-dialog
      title="选择人员"
      :visible.sync="userVisible"
      width="60%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <flow-user v-if="userVisible" :selectData="copyUser" @handleAssignSelect="handleAssignSelect"></flow-user>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="userVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitSelect">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {StrUtil} from "@/utils/StrUtil";
import FlowUser from "@/components/Flow/Design/User";
export default {
  name: "CopyPanel",
  components: {
    FlowUser
  },
  /** 组件传值  */
  props : {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      userVisible: false,
      // 数据回显
      copyUser: null,
      selectCopyUserList:[],
      selectDataList:[]
    }
  },

  /** 传值监听 */
  watch: {
    id: {
      handler(newVal) {
        if (StrUtil.isNotBlank(newVal)) {
          this.resetCopyList();
        }
      },
      immediate: true, // 立即生效
    },
  },
  created() {

  },
  methods: {
    // 用户选中数据
    handleAssignSelect(selection) {
      if (selection) {
        this.selectDataList = JSON.parse(JSON.stringify(selection));
      }
    },

    // 保存选中的数据
    submitSelect() {
      if (this.selectDataList.length > 0) {
        const newUserList = [];
        this.selectDataList?.forEach(user => {
          const {userId, nickName} = user;
          const newUserObject = this.modelerStore.moddle.create(`flowable:Copy`, {userId, nickName});
          newUserList.push(newUserObject);
        })
        const userObject = this.modelerStore.moddle.create(`flowable:CopyItem`, {
          values: newUserList
        });
        this.updateElementExtensions(userObject);
        this.resetCopyList();
      }
      this.userVisible = false;
      this.selectDataList = [];
    },

    // 初始化数据
    resetCopyList() {
      this.bpmnElement = this.modelerStore.element;
      this.otherExtensionList = [];
      const bpmnElementCopyItem =
        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
          if (ex.$type !== `flowable:CopyItem`) {
            this.otherExtensionList.push(ex);
          }
          if (ex.values) {
            return ex.$type === `flowable:CopyItem`;
          }
        }) ?? [];

      if (bpmnElementCopyItem.length > 0) {
        // 保存所有的抄送人员信息
        this.bpmnElementCopyList = bpmnElementCopyItem.reduce((pre, current) => pre.concat(current.values), []);
        // 复制 显示
        this.selectCopyUserList = JSON.parse(JSON.stringify(this.bpmnElementCopyList ?? []));
        this.copyUser = this.selectCopyUserList;
      } else {
        this.bpmnElementCopyList = [];
        this.selectCopyUserList = [];
        this.copyUser = null;
      }
    },

    // 移除抄送人员
    removeCopy(user) {
      this.$confirm("确认移除该抄送人员吗？", "提示", {
        confirmButtonText: "确 认",
        cancelButtonText: "取 消"
      }).then(() => {
          this.bpmnElementCopyList.splice(this.bpmnElementCopyList.find(item => item.userId === user.userId), 1);
          if (this.bpmnElementCopyList.length === 0) {
            if (this.modelerStore.element.businessObject?.extensionElements?.values) {
              this.modelerStore.element.businessObject.extensionElements.values.forEach((ex, index) => {
                if (ex.$type === 'flowable:CopyItem') {
                  this.modelerStore.element.businessObject.extensionElements.values.splice(index, 1);
                }
              });
            }
          } else {
            const propertiesObject = this.modelerStore.moddle.create(`flowable:CopyItem`, {
              values: this.bpmnElementCopyList
            });
            this.updateElementExtensions(propertiesObject);
          }
          this.resetCopyList();
        })
        .catch(() => console.info("操作取消"));
    },

    // 更新扩展抄送人员信息
    updateElementExtensions(properties) {
      const extensions = this.modelerStore.moddle.create("bpmn:ExtensionElements", {
        values: this.otherExtensionList.concat([properties])
      });

      this.modelerStore.modeling.updateProperties(this.modelerStore.element, {
        extensionElements: extensions
      });
    }
  }
}



</script>
